<template>
  <div class="wrapper">
    <Header title="饿了么 商家列表" />
    <ul class="business">
      <BusinessItem
          :img="require('@/assets/img/sj01.png')"
          :name="name"
          :startPrice="startPrice"
          :deliveryFee="deliveryFee"
          :description="description"
      />
    </ul>
    <Footer />
  </div>
  <div class="wrapper">
    <Header title="饿了么 商家列表" />
    <ul class="business">
      <BusinessItem
          :img="require('@/assets/img/sj03.png')"
          :name="name"
          :startPrice="startPrice"
          :deliveryFee="deliveryFee"
          :description="description"
      />
    </ul>
    <Footer />
  </div>
  <div class="wrapper">
    <Header title="饿了么 商家列表" />
    <ul class="business">
      <BusinessItem
          :img="require('@/assets/img/sj02.png')"
          :name="name"
          :startPrice="startPrice"
          :deliveryFee="deliveryFee"
          :description="description"
      />
    </ul>
    <Footer />
  </div>
  <div class="wrapper">
    <Header title="饿了么 商家列表" />
    <ul class="business">
      <BusinessItem
          :img="require('@/assets/img/sj04.png')"
          :name="name"
          :startPrice="startPrice"
          :deliveryFee="deliveryFee"
          :description="description"
      />
    </ul>
    <Footer />
  </div>
  <div class="wrapper">
    <Header title="饿了么 商家列表" />
    <ul class="business">
      <BusinessItem
          :img="require('@/assets/img/sj05.png')"
          :name="name"
          :startPrice="startPrice"
          :deliveryFee="deliveryFee"
          :description="description"
      />
    </ul>
    <Footer />
  </div>
  <div class="wrapper">
    <Header title="饿了么 商家列表" />
    <ul class="business">
      <BusinessItem
          :img="require('@/assets/img/sj06.png')"
          :name="name"
          :startPrice="startPrice"
          :deliveryFee="deliveryFee"
          :description="description"
      />
    </ul>
    <Footer />
  </div>
  <div class="wrapper">
    <Header title="饿了么 商家列表" />
    <ul class="business">
      <BusinessItem
          :img="require('@/assets/img/sj07.png')"
          :name="name"
          :startPrice="startPrice"
          :deliveryFee="deliveryFee"
          :description="description"
      />
    </ul>
    <Footer />
  </div>
</template>

<script>
import Header from '@/components/AppHeader.vue'
import Footer from '@/components/AppFooter.vue'
import BusinessItem from '@/components/BusinessItem.vue'

export default {
  components: {
    Header,
    Footer,
    BusinessItem
  },
  data() {
    return {
      name: '万家饺子（软件园E18店）',
      startPrice: 15,
      deliveryFee: 3,
      description: '各种饺子炒菜'
    }
  }
}
</script>

<style>
/* 样式代码可以从原 HTML 文件中迁移过来 */
/****************** 总容器 ******************/
.wrapper{
  width: 100%;
  height: 100%;
}

/****************** header部分 ******************/
.wrapper header{
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}

/****************** 商家列表部分 ******************/
.wrapper .business{
  width: 100%;
  margin-top: 12vw;
  margin-bottom: 14vw;
}
.wrapper .business li{
  width: 100%;
  box-sizing: border-box;
  padding: 2.5vw;
  border-bottom: solid 1px #DDD;
  user-select: none;
  cursor: pointer;

  display: flex;
  align-items: center;
}
.wrapper .business li .business-img{
  /*这里设置为相当定位，成为business-img-quantity元素的父元素*/
  position: relative;
}
.wrapper .business li .business-img img{
  width: 20vw;
  height: 20vw;
}
.wrapper .business li .business-img .business-img-quantity{
  width: 5vw;
  height: 5vw;
  background-color: red;
  color: #fff;
  font-size: 3.6vw;
  border-radius: 2.5vw;

  display: flex;
  justify-content: center;
  align-items: center;

  /*设置成绝对定位，不占文档流空间*/
  position: absolute;
  right: -1.5vw;
  top: -1.5vw;
}
.wrapper .business li .business-info{
  margin-left: 3vw;
}
.wrapper .business li .business-info h3{
  font-size: 3.8vw;
  color: #555;
}
.wrapper .business li .business-info p{
  font-size: 3vw;
  color: #888;
  margin-top: 2vw;
}
/****************** 底部菜单部分 ******************/
.wrapper .footer{
  width: 100%;
  height: 14vw;
  border-top: solid 1px #DDD;
  background-color: #fff;

  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
  justify-content: space-around;
  align-items: center;
}
.wrapper .footer li{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  color: #999;
  user-select: none;
  cursor: pointer;
}
.wrapper .footer li p{
  font-size: 2.8vw;
}
.wrapper .footer li i{
  font-size: 5vw;
}
</style>